<template>
    <div class="login_container">
        <div class="login_box">
            <h1>秒妙测后台管理系统</h1>
            <!-- 登录表单 -->
            <el-form class="login_form" :rules="loginFormRules" :model="userForm" ref="loginFormRef">
                <!-- 用户名 -->
                <el-form-item prop="username">
                    <el-input class="login_input" v-model="userForm.username" prefix-icon="el-icon-user-solid"></el-input>
                </el-form-item>
                <!-- 密码 -->
                <el-form-item prop="password">
                    <el-input class="login_input" v-model="userForm.password" prefix-icon="el-icon-lock" show-password></el-input>
                </el-form-item>
                <router-link to='/UpPwd' class="Update-password">忘记密码</router-link>
                <el-form-item class="btns">
                    <el-button type="primary" @click="login">登录</el-button>
                    <el-button type="primary" @click="reg_join">注册</el-button>
                    <el-button type="info" @click="resetLoginForm">重置</el-button>
                </el-form-item>

            </el-form>
        </div>
        <!-- 注册弹窗 -->
        <el-dialog :visible.sync="RegDialog" width="20%" center>
            <!-- 注册子组件 -->
            <Register :PowerList='PowerList' :CompList='CompList' />
        </el-dialog>
    </div>
</template>

<script>
import { power_list_get, login_post } from './axios_api/api.js'
import Register from './subunit/Register'
export default {
    components: {
        Register,
    },
    data() {
        return {
            userForm: {
                username: 'tyt123',
                password: 'tyt123'
            },
            // 这是表单的验证规则对象
            loginFormRules: {
                // 验证用户是否合法
                username: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    { pattern: /^[a-zA-Z]([a-zA-Z0-9]){5,16}$/, message: '用户名以字母开头，且长度在 6 到 16 个字符' },
                ],
                // 验证密码是否合法
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { pattern: /^[a-zA-Z]([a-zA-Z0-9]){5,16}$/, message: '用户名以字母开头，且长度在 6 到 16 个字符' },
                ],
            },
            // 注册弹窗
            RegDialog: false,
            // 权限列表
            PowerList: [],
            // 公司列表
            CompList: [],
        }
    },
    mounted() {
        this.get_power();
    },
    methods: {
        // 重置事件
        resetLoginForm() {
            // 绑定的from表单的ref属性，resetFields是element里面的事件
            this.$refs.loginFormRef.resetFields();
        },
        login() {
            // 验证信息是否成功
            this.$refs.loginFormRef.validate(valid => {
                if (!valid) return;
                login_post(this.userForm).then(resp => {
                    if (resp.code === 200) {
                        // 遍历处理数据
                        for (let i = 0; i < this.PowerList.length; i++) {
                            // 如果用户权限id与权限表id相同
                            if (resp.pid === this.PowerList[i].id) {
                                // 则将用户权限id修改成权限name
                                resp.pid = this.PowerList[i].pname
                            }
                        }
                        this.$message.success(resp.message)
                        localStorage.setItem('token', resp.token)
                        localStorage.setItem('username', resp.username)
                        localStorage.setItem('photo', resp.photo)
                        localStorage.setItem('pid', resp.pid)
                        this.$router.push('/index')
                    } else {
                        this.$message.error(resp.message)
                    }
                })
            })
        },
        reg_join() {
            this.RegDialog = true;

        },

        // 获取权限及公司列表
        get_power() {
            power_list_get().then(resp => {
                if (resp.code === 200) {
                    this.PowerList = resp.powerlist
                    this.CompList = resp.complist
                    console.log(this.PowerList)
                    console.log(this.CompList)
                }
            })
        }
    }
}
</script>

<style>
</style>